<template>
    <section>
        <!--搜索工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px; ">
            <el-form :inline="true" :model="filters" :rules="searchRules" ref="filters" label-width="80px">
                <el-form-item prop="year">
                    <el-select
                            placeholder="年份" v-model="filters.year" size="18px">
                        <el-option :key="item" :label="item" :value="item"
                                   v-for="item in options.years"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item prop="check_report_status">
                    <el-select
                            placeholder="通知书下发状态" v-model="filters.check_report_notice_status" size="18px">
                        <el-option :key="key" :label="item" :value="key"
                                   v-for="(item,key) in options.manager_notice_status"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search">搜索</el-button>
                    <el-button @click="reset">重置</el-button>
                </el-form-item>
            </el-form>
        </el-col>


        <!--搜索结果表格-->
        <el-table
                :header-row-style="headerRowStyle"
                :data="tableData"
                stripe
                v-loading="listLoading"
                style="width: 100%;">
            <el-table-column
                    label="序号"
                    type="index"
                    width="70"
                    align="center">
            </el-table-column>

            <el-table-column
                    align="center"
                    label="名称"
                    prop="notice_book_name">
                <template slot-scope="scope">
                    {{scope.row.title}}
                </template>
            </el-table-column>



            <el-table-column
                    align="center"
                    label="生成时间"
                    prop="date">
            </el-table-column>

            <!--<el-table-column
                    align="center"
                    label="整改状态"
                    prop="corrective_status"
                    :formatter="formatterCorrectiveStatus">
            </el-table-column>
            <el-table-column
                    align="center"
                    label="完成比例"
                    width="140"
                    prop="total_bugs">
                <template slot-scope="scope">
                    {{scope.row.total_fix_bugs}} / {{scope.row.total_bugs}}
                </template>
            </el-table-column>-->

            <el-table-column
                    align="center"
                    label="通知书下发状态"
                    prop="check_report_notice_status"
                    :formatter="formatterStatus">
            </el-table-column>


            <el-table-column label="操作" align="left" width="200">
                <template slot-scope="scope">
              <!--     <el-button
                            type="primary" plain=""
                            @click="download(scope.row.notice_book_address,scope.row.title+'.docx')">下载
                    </el-button>-->
                    <a style="padding:6px 12px;border:1px solid #66b1ff" :href="scope.row.notice_book_address" :download="scope.row.title+'.docx'">下载</a>

                    <el-button
                            :type="scope.row.check_report_notice_status == '0' ? 'primary' : 'info'"
                            :disabled="scope.row.check_report_notice_status != '0'"
                            @click="send(scope.row.id)">下发
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页-->
        <el-col :span="24" class="toolbar">
            <el-pagination
                    style="text-align: center;"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-size="pager.page_size"
                    :page-sizes="pager.sizes"
                    background
                    :current-page="pager.page_current"
                    layout="prev,pager,next,sizes,total"
                    :total="pager.total">
            </el-pagination>
        </el-col>



        <el-dialog
                title="提交整改通知书"
                class="submit-report-dialog"
                :visible.sync="submitReportDialog"
                width="30%"
                :before-close="handleClose">
            <el-upload
                    class="upload-demo release-upload"
                    drag
                    action=""
                    :limit="1"
                    ref="reportFileUpload"
                    :on-exceed="handleExceed"
                    :on-success="handleAvatarSuccess"
                    :http-request="httpRequest"
                    :show-file-list="true"
                    :file-list="fileLists"
                    :auto-upload="false"
                    multiple>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传PDF,Word文件，大小不超过10MB</div>
            </el-upload>
            <el-input type="textarea" :rows="4" v-model="issueReportDesc" placeholder="请输入整改建议，200字以内"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="submitReportDialog = false"> 取 消 </el-button>
                <el-button type="primary" @click="submitReportReady"> 下 发 </el-button>
              </span>
        </el-dialog>
    </section>
</template>

<script>
    import {getNoticeList,getReportsDetail,returnReport,saveScanId,issueReportNotice,createNotice} from '../../api/report_manager_api'
    import {upload_file,get_update_img,get_file,getResourceUrl,get_file_blob} from "../../api/common";
    import { saveAs } from 'file-saver';
    import dict from '../../common/js/dict';
    export default {
        computed:{
            base_url(){
               // return this.$store.state.res_url
               return ''
            }
        },
        data() {
            return {
                send_id:'',

                fileLists:[],
                issueReportDesc:'',
                submitReportDialog: false,
                dict:dict,
                currentYear: '2018',
                //表单header样式
                headerRowStyle: {
                    backgroundColor: "#ddd",
                    color: "#333",
                    textAlign: "center"
                },
                listLoading: false,
                //表格数据
                tableData: [],
                filters: {
                    year: '',
                    type:'1',//这里与整改进度接口公用，用一个type区分
                    check_report_notice_status:'',
                },
                searchRules:{
                    year:{required:true,message:'请选择年份',trigger:'blur'}
                },
                //分页设置
                pager: {
                    sizes: [10, 20, 30, 40, 50],
                    total: 0,
                    page_size: 10,
                    page_current: 1
                },
                options: {
                    years: [],
                    check_result: dict.check_result,
                    manager_notice_status:dict.manager_notice_status,
                    corrected_progress_status:dict.corrected_progress_status,
                }
            }
        },
        methods: {
            download(url,fileName){


            },
            send(id){
                this.send_id = id
                this.submitReportDialog = true;
            },
            handleClose() {
                this.reportDesc = '';
                this.fileLists = []
                this.submitReportDialog = false;
            },
            issueReport() {
                let params = {
                    id: this.send_id,
                    msg:{
                        content:this.issueReportDesc
                    }
                };
                issueReportNotice(params).then((res)=>{
                    if(res.data.status == 200) {
                        this.submitReportDialog = false;
                        this.issueReportDesc = ''
                        this.getReports()
                        this.$message({
                            type: 'success',
                            message: "通知书下发成功！"
                        });
                    } else {
                        if (res.data.status == 401) {
                            this.$router.push('/login');
                        }
                        this.$message.error(res.data.msg);
                    }
                });
            },
            httpRequest(item,fileLists) {

                let formData = new FormData();
                formData.append('file', item.file);
                upload_file(formData).then((res) => {
                    let result = JSON.parse(res.data.datas);
                    if (res.data.status == 200) {
                        let params ={
                            id:this.send_id,
                            scanning_copy_id:result.id,
                            file_name:item.file.name
                        }
                        saveScanId(params).then((res)=>{
                            this.issueReport()
                            if(res.data.status==200){
                        /*        this.$message({
                                    type: 'success',
                                    message: "扫描件上传成功"
                                });
                                //获取文件地址
*/
                            }else {
                                if (res.data.status == 401) {
                                    this.$router.push('/login');
                                }
                                this.$message.error(res.data.msg);
                            }
                        });

                    } else {
                        if (res.data.status === 401) {
                            this.$router.push('/login');
                        }
                        this.$message.error(res.data.msg);
                        this.fileLists = [];
                    }
                });
            },
            handleExceed(files, fileList) {
                this.$message.warning(`限制只能上传1个文件`);
            },
            handleAvatarSuccess(res, file) {
                this.fileLists = [{'name': file.name, 'url': URL.createObjectURL(file.raw)}];
            },
            submitReportReady() {
                this.$refs.reportFileUpload.submit();
            },
        /*    download(file_url){

              window.open(this.base_url+file_url)
            },*/
            formatCheckResult(row){
                if(row.check_result){
                    return dict.check_result[row.check_result];
                }else{
                    return '——';
                }
            },
            formatterStatus(row){
                return this.options.manager_notice_status[row.check_report_notice_status];
            },
            formatterCorrectiveStatus(row){
                return this.options.corrected_progress_status[row.corrective_status];
            },

            // 详情
            view(id) {
                this.$router.push('/manage/reports/detail/' + id);
            },
            //分页page_size发生改变
            handleSizeChange(val) {
                this.pager.page_current = 1;
                this.pager.page_size = val;
                this.getReports();
            },
            //分页page_current发生改变
            handleCurrentChange(val) {
                this.pager.page_current = val;
                this.getReports();
            },
            search(){
                this.pager.page_current = 1;
                this.getReports();
            },
            getReports(){
                this.$refs['filters'].validate((valid) => {
                    if (valid){

                        this.listLoading = true;  //显示loading

                        let condition = this.filters;
                        let params = {
                            page_size: this.pager.page_size,
                            page_current: this.pager.page_current,
                            order_column:"gmt_modified",
                            order_by:"desc",
                            condition: Object.assign({},condition)
                        };

                        if (condition.check_report_status === ''){
                            params.condition.check_report_status='-2'
                        }

                        getNoticeList(params).then((res) => {
                            if (res.data.status == 200) {
                                this.listLoading = false;  //隐藏loading

                                let result = JSON.parse(res.data.datas);
                                this.tableData = result.items



                                this.pager.total = result.total;
                            } else {
                                if (res.data.status == 401) {
                                    this.$router.push('/login');
                                }
                                this.$message.error(res.data.status + " " + res.data.msg);
                            }
                        });
                    }
                });

            },
            reset(){
                this.$refs['filters'].resetFields();
                this.currentYear = (new Date()).getFullYear()+'';
                this.filters.year = this.currentYear;
                this.filters.check_report_notice_status = '';
                this.pager.page_current = 1;
                this.getReports();
                },
            initYears() {
                this.currentYear = (new Date()).getFullYear()+'';
                this.filters.year = this.currentYear;

                for (let i = this.currentYear; i >= 2018; i--) {
                    this.options.years.push(i);
                }
            },
            //初始化页面
            initData() {
                this.initYears();
                this.getReports();
            }
        },
        mounted() {
            this.$nextTick(function () {
                this.initData();
            })
        }
    }
</script>

<style scoped>

</style>
